<!--
- Author:  LiShibin.
- Date:    2017/3/4.
- File:    底部tab.
-->
<template>
  <div class="footer-tab" v-show="show">
    <nav class="footer-tab-nav">
      <ul>
        <li :class="{ 'on': item.name == $route.name || item.name == current}" v-for="item in list">
          <div class="footer-tab-nav-photograph" v-show="item.type && item.type == 'middle'">
            <i class="iconfont icon-paizhao"></i>
          </div>
          <a href="javascript:void(0)" @click="go(item.name)" v-show="!item.type || item.type != 'middle'">
            <i class="iconfont" :class="[ item.icon ]" v-show="item.name != $route.name && item.name != current"></i>
            <i class="iconfont" :class="[ item.icon2 ]" v-show="item.name == $route.name || item.name == current"></i>
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        list: [
          {
            title: '首页',
            name: 'home',
            icon: 'icon-app-index-a',
            icon2: 'icon-app-index-a'
          },
          {
            title: '购物车',
            name: 'cart-list',
            icon: 'icon-gouwuche',
            icon2: 'icon-gouwuche'
          },
          {
            title: '识花',
            name: 'distinguish',
            icon: 'icon-paizhao',
            icon2: 'icon-paizhao'
//            type: 'middle'
          },
          {
            title: '积分商城',
            name: 'classify-integral',
            icon: 'icon-shangpin',
            icon2: 'icon-shangpin'
          },
          {
            title: '我的',
            name: 'my',
            icon: 'icon-wode',
            icon2: 'icon-wode'
          }
        ]
      }
    },
    props: {
      current: {
        type: String,
        default: function () {
          return ''
        }
      },
      show: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    created() {
    },
    methods: {
      go(routerName) {
        let query = {}
        if (routerName == 'home') {
          let storeId = this.$storage.getStore() || ''
          if (storeId) {
            query.storeId = storeId
            window.location.href = 'http://' + window.location.host + '/wap/?storeId=' + storeId // ios微信分享要如此跳转后才能正确分享
          } else {
            window.location.href = 'http://' + window.location.host + '/wap/' // ios微信分享要如此跳转后才能正确分享
          }
          return
        }
        if (routerName == 'distinguish') {
          query.temp = this.$utils.getRandomStr() // 加个随机数，为了每次点击识花导航都能重新进入组件进行拍照识花
//          console.log(query.temp)
          window.location.href = 'http://' + window.location.host + '/wap/distinguish?temp=' + query.temp   // ios微信分享要如此跳转后才能正确分享
          return
//          query.fresh = 'true'
        }
        if (routerName == 'classify-integral') {
          window.location.href = 'http://' + window.location.host + '/wap/classify/integral'   // ios微信分享要如此跳转后才能正确分享
          return
        }
        this.$router.push({name: routerName, query: query})
      }
    }
  }
</script>

<style lang="less">
  .footer-tab {
    &-nav {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 49px;
      padding-top: 0.25rem;
      border-top: #d0cfcd solid 1px;
      background: #f8f8f8;
      z-index: 10;
      &-photograph {
        background: url(../assets/images/demo/Photograph_bg.png) no-repeat;
        width: 52.5px;
        text-align: center;
        height: 52.5px;
        background-size: 100%;
        margin: -15px auto 0 auto;
        i {
          color: #fff;
          font-size: 24px !important;
          line-height: 52.5px;
          padding-top: 0 !important;
        }
      }
      li {
        position: relative;
        float: left;
        width: 20%;
        text-align: center;
        color: #898989;
        .icon-shipin1, .icon-shipin3 {
          font-size: 22px;
          line-height: 23px;
        }
        i {
          display: block;
          font-size: 20px;
        }
        p {
          font-size: 12px;
          padding-top: 0.05rem;
        }
        a {
          color: inherit;
        }
        .num {
          position: absolute;
          left: 2.125rem;
          top: 0.15rem;
          display: block;
          width: 0.65rem;
          height: 0.65rem;
          line-height: 0.65rem;
          font-size: 0.5rem;
          color: #fff;
          text-align: center;
          background: #e60012;
          border-radius: 50%;
        }
      }
      li.on {
        color: #45a73a;
      }
    }
  }
</style>
